<template>
	<div class="lianghaodingdan">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right" v-loading="loading">
				<div class="flex" style="background: #F9F9F9; position: relative;">
					<!-- <div style="position: absolute; right: 20px; top: 20px; color: #f00; font-weight: bold;">返回{{moban.platform_name}}系统
					</div> -->
					<div
						style="width: 180px; background: #FFFFFF; border-top: 3px #f00 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						靓号订单</div>
					<div @click="go('/lianghaodingdangai')"
						style="width: 180px; background: #F9F9F9; border-top: 3px #F9F9F9 solid; line-height: 50px; text-align: center; cursor: pointer; font-weight: bold;">
						优惠专区</div>
				</div>
				<div style="background: #EFEFEF; height: 20px; width: 100%;"></div>
				
				<div class="add flex" style="flex-wrap: wrap;">
					<div style="position: relative;">
						<el-input v-model="all.ids" style="width: 160px; margin-right: 10px; " placeholder="订单ID">
						</el-input>
						<el-tooltip class="item" effect="dark" content="批量查询" placement="top-start">
						      <span style="position: absolute; right: 15px; top: 7px; color: #1989FA; font-size: 16px; cursor: pointer;" @click="duoxuanlog = true">
						        <i class="el-icon-circle-plus"></i>
						      </span>
						</el-tooltip>
					</div>
					
					<el-input v-model="all.number" style="width: 160px; margin-right: 10px; "  v-on:keyup.enter.native="search"placeholder="购买号码">
					</el-input>
					<el-input v-model="all.mobile" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="收货人电话">
					</el-input>
					<el-input v-model="all.tracking_number" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="物流单号">
					</el-input>
					<el-input v-model="all.supplier" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="供应商">
					</el-input>
					<el-input v-model="all.sku" style="width: 160px; margin-right: 10px; " v-on:keyup.enter.native="search" placeholder="产品编号">
					</el-input>
					<el-select v-model="all.order_status"  style="width: 160px; margin-top: 20px; margin-right: 10px;" filterable clearable placeholder="订单状态">

						<el-option label="初步审核" value="120"></el-option>
						<el-option label="等待上传照片" value="150"></el-option>
						<el-option label="待审核" value="200"></el-option>
						<el-option label="待开卡" value="450"></el-option>
						<el-option label="已领取" value="460"></el-option>
						<el-option label="开卡中" value="470"></el-option>
						<el-option label="待发货" value="500"></el-option>
						<el-option label="已发货" value="550"></el-option>
						<el-option label="已退货" value="-700"></el-option>
						<el-option label="开卡失败" value="-460"></el-option>
						<el-option label="证件不合格待重传" value="-200"></el-option>
						<el-option label="订单终止" value="0"></el-option>
					</el-select>
					<el-select v-model="all.pay_status" style="width: 160px; margin-right: 10px; margin-top: 20px;" filterable clearable placeholder="付款/退款状态">
						<el-option label="已申请退款" value="-100"></el-option>
						<el-option label="完成退款" value="-200"></el-option>
						<el-option label="拒绝退款" value="-400"></el-option>
						<el-option label="待支付" value="100"></el-option>
						<el-option label="已支付" value="200"></el-option>
					</el-select>

					<el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" @change="timechange" style="width: 400px; margin-right: 10px; margin-top: 20px; "
						type="datetimerange" range-separator="——" start-placeholder="用户下单开始时间"
						end-placeholder="用户下单结束时间"></el-date-picker>

					
				</div>
				<div class="add flex" style="padding: 0 20px; justify-content: flex-start;">
					<el-button type="primary" size="small" @click="search">搜索</el-button>
					<upload-excel-component @on-selected-file="exportData" class="btnp" buttonName="导入发货信息"></upload-excel-component>
					<el-button @click="xiazai1" type="text" size="small">下载导入发货模板</el-button>
					<el-button type="primary" size="small" @click="daochu">导出生产</el-button>
          <el-button type="primary" size="small" @click="daochu2">导出订单</el-button>
				</div>
				<div style="margin: 20px; background: #EAEAEA; padding: 20px;">
					付款金额：{{money.total}},付款数量：{{money.amount}}
				</div>
				<div class="con" style="margin-top: 20px;">
					<div class="flex">
						<div class="newthli" style="min-width: 180px;">订单信息</div>
						<div class="newthli" style="min-width: 140px;cursor: pointer;" @click="shunxu" >
						  时间排序
						  <i class="el-icon-top" style="color: #2974FF;" v-if="!desc"></i>
						  <i style="color: #2974FF;" class="el-icon-bottom" v-if="desc"></i>
						</div>
						<div class="newthli"  style="min-width: 180px;">收件人信息</div>
						<div class="newthli">订单状态</div>
						<div class="newthli">付款状态</div>
						<div class="newthli">退款状态</div>
						<div class="newthli">生产信息</div>
						<div class="newthli">操作</div>
					</div>
					<div v-for="item in tableData" :key="item.id" style="background: #FFFFFF;">
						
						<div style="background: #F3FAFF; padding: 15px 20px; border: 1px #EAEAEA solid ; " class="flex">
							
							<div class="newhli" style="margin-right: 20px;">
							  订单ID：{{item.id}}
							  <i
							    class="el-icon-document-copy"
							    style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;"
							    @click="copy(item.id)"
							  ></i>
							</div>
							<div class="newhli" style="display:flex;margin-right: 20px;">
							  订单来源：{{item.source}}
							</div>
							<div class="newhli">
							  外部订单编号：{{item.source_id}}
							  <i class="el-icon-document-copy" style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;" @click="copy(item.source_id)"></i>
							</div>
						</div>
						<div class="flex" style="border: 1px #EAEAEA solid; border-top: 0;">
							<div class="newthli" style="min-width: 250px; max-width: 250px; text-align: left; border-right: 1px #EAEAEA solid;">
								<div class="flex" style="justify-content: space-between; margin-bottom: 10px;">
									<div style="font-size: 16px; font-weight: bold; color: #6E6E6E;">{{item.number}}</div>
									<div style="font-size: 16px; font-weight: bold; color: #6E6E6E;">￥{{item.total}}</div>
								</div>
								<div class="flex" style="color: #646464; margin-bottom: 10px;" >
									<div style="margin-right: 10px;">{{item.number_province}}</div>
									<div style="margin-right: 10px;">{{item.number_city}}</div>
									<div>{{item.operator}}</div>
								</div>
								<div style="color: #B7B7B7; margin-bottom: 10px;">
									<div>供应商：{{item.supplier}}</div>
									<div>产品编码：{{item.sku}}</div>
								</div>
							</div>
							<div class="newthli" style="min-width: 250px; max-width: 250px; text-align: left; color: #646464;border-right: 1px #EAEAEA solid;">
								<div style="margin-bottom: 10px;">收货人：{{item.address_name}}</div>
								<div style="margin-bottom: 10px;">联系电话：{{item.address_mobile}}</div>
								<div style="margin-bottom: 10px;">收货地址：{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
							</div>
							<div class="newthli flex" style="border-right: 1px #EAEAEA solid;justify-content: center; align-items: center;" >
								<span v-if="item.order_status == 0">订单终止</span>
								<span v-if="item.order_status == -460">开卡失败</span>
								
								<span v-if="item.order_status == 120">初步审核</span>
								<span v-if="item.order_status == 150">待完善证件信息</span>
								<span v-if="item.order_status == -700">订单终止</span>
								
								<span v-if="item.order_status == 200">待审核</span>
								<span v-if="item.order_status == 450">待开卡</span>
								<span v-if="item.order_status == 460">已领取</span>
								<span v-if="item.order_status == 470">开卡中</span>
								<span v-if="item.order_status == 500">待发货</span>
								<span v-if="item.order_status == 550">已发货</span>

							</div>
							<div class="newthli flex" style="border-right: 1px #EAEAEA solid; justify-content: center; align-items: center; font-size: 14px; ">
								<div v-if="item.pay_status == 100">未支付</div>
								<div v-if="item.pay_status != 100">
									<div >已支付</div>
									<div v-if="itempayment_method == 'ali_wap'">支付宝付款</div>
									<div v-if="itempayment_method != 'ali_wap'">微信付款</div>
									<div>成本：{{item.base_price}}</div>
									<div>时间：{{item.pay_at}}</div>
								</div>
								
								
								
							</div>
							<div class="newthli flex" style="border-right: 1px #EAEAEA solid; justify-content: center; align-items: center;">
								<div>
									<span v-if="item.pay_status == -100">已申请退款</span>
									<span v-if="item.pay_status == -200">完成退款</span>
									<span v-if="item.pay_status == -400">拒绝退款</span>
									<div v-if="item.refund_reason">拒绝退款原因：{{item.refund_reason}}</div>
								</div>
							</div>

							<div class="newthli" style=" text-align: left; color: #646464;border-right: 1px #EAEAEA solid;">
								<div>物流单号：{{item.tracking_number}}</div>
								<div v-if="item.reason">失败原因：
								<el-tooltip effect="dark" popper-class="tooltip" placement="top">
								  <div slot="content">{{item.reason}}</div>
								  <div style="max-height:100px; height: 40px; line-height: 20px; overflow: hidden;">{{item.reason}}</div>
								</el-tooltip>

								</div>
							</div>
							<div class="newthli">
								<el-button type="primary" size="mini" style="margin-bottom: 10px;" @click="tuikuan2(item.id)" v-if="item.pay_status == -100">拒绝退款</el-button>
								<el-button type="primary" size="mini" @click="tuikuan(item.id)" v-if="item.pay_status == -100">同意退款</el-button>
							</div>
						</div>
					</div>
					<!-- <el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading">
						<el-table-column label="订单ID" width="80" >
							<template slot-scope="scope">
								<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="号码"  width="120">
							<template slot-scope="scope">
								<span>{{ scope.row.number }}</span>
							</template>
						</el-table-column>
						<el-table-column label="价格" width="80">
							<template slot-scope="scope">
								<span>{{ scope.row.total }}</span>
							</template>
						</el-table-column>
						<el-table-column label="运营商" width="80">
							<template slot-scope="scope">
								<span>{{ scope.row.operator }}</span>
							</template>
						</el-table-column>
						<el-table-column label="卡品牌" width="120">
							<template slot-scope="scope">
								<span>{{ scope.row.brand }}</span>
							</template>
						</el-table-column>

						<el-table-column label="收货信息" >
							<template slot-scope="scope">
								<span>{{ scope.row.address_name }}</span>
								<span>{{ scope.row.address_mobile }}</span>
								</br>
								<span>{{ scope.row.province }}</span>
								<span>{{ scope.row.city }}</span>
								<span>{{ scope.row.district }}</span>
								<span>{{ scope.row.address }}</span>
							</template>
						</el-table-column>
						<el-table-column label="交易状态" width="80">
							<template slot-scope="scope">
								<span v-if="scope.row.pay_status == 100">待支付</span>
								<span v-if="scope.row.pay_status == 200">已支付</span>
								<span v-if="scope.row.pay_status == -100">已申请退款</span>
								<span v-if="scope.row.pay_status == -200">完成退款</span>
								<span v-if="scope.row.pay_status == -400">拒绝退款</span>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" width="80">
							<template slot-scope="scope">
							
								<div style="color: #f00;" v-if="scope.row.order_status == 0">订单终止</div>
								<div style="color: #f00;" v-if="scope.row.order_status == -460">开卡失败</div>
								<div style="color: #f00;" v-if="scope.row.order_status == 200">待审核</div>
								<div style="color: #f00;" v-if="scope.row.order_status == 450">待开卡</div>
								<div style="color: #f00;" v-if="scope.row.order_status == 460">已领取</div>
								<div style="color: #f00;" v-if="scope.row.order_status == 470">开卡中</div>
								<div style="color: #f00;" v-if="scope.row.order_status == 500">待发货</div>
							</template>
						</el-table-column>
						<el-table-column label="失败原因" width="150">
							<template slot-scope="scope">
								<span>{{ scope.row.reason }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="tuikuan(scope.row.id)" v-if="scope.row.pay_status == -100">拒绝退款</el-button>
								<el-button type="primary" size="mini" @click="tuikuan(scope.row.id)" v-if="scope.row.pay_status == -100">同意退款</el-button>
							</template>
						</el-table-column>
					</el-table> -->
					<el-pagination background layout="total,prev, pager, next" :current-page="all.page"
						@current-change="fanye" :page-size="all.pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="多个订单ID搜索" :visible.sync="duoxuanlog" :close-on-click-modal="false" width="600px">
		  <div>
		    <el-input type="textarea" :rows="10" placeholder="一行一个，可直接粘贴excel纵列数据" v-model="duoxuanids"></el-input>
		  </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" size="small" @click="duotiaoqueren">确定</el-button>
		  </div>
		</el-dialog>
		<el-dialog title="上传表单" :visible.sync="log" width="440px">
			<div class="flex" style="line-height: 32px;">
				<div>选择文件：</div>
				<div>
					<upload-excel-component @on-selected-file="exportData" class="btnp" :buttonName="name3">
					</upload-excel-component>
				</div>
			</div>
			<div class="flex" style="line-height: 32px;">
				<div>选择月份：</div>
				<div>
					<el-date-picker v-model="time1" value-format="yyyy-MM" type="month" size="small" placeholder="选择月份">
					</el-date-picker>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取消</el-button>
				<el-button type="primary" @click="shangchuan" :loading="shangchuanzhong">上传</el-button>
			</span>
		</el-dialog>
		<!-- <foot></foot>
		<notice></notice> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import notice from '@/components/notice.vue'
	import moment from "moment";
	import UploadExcelComponent from "@/components/UploadExcel/index.vue";
	export default {
		components: {
			left,
			top,
			foot,
			notice,
			UploadExcelComponent
		},
		name: 'lianghaodingdan',
		data() {
			return {
				desc:true,
				duoxuanlog:false,
				duoxuanids:'',
				duoxuanids2:"",
				all: {
					pagesize: 20,
					page: 1,
					number: "",
					mobile: "",
					tracking_number: "",
					supplier: "",
					sku: "",
					order_status: "",
					ids:"",
					pay_status:"",
					order_start:"",
					order_end:""
				},
				tableData: "",
				name1: "导入号码",
				name2: "导入直播订单表",
				name3: "",
				msg: "hello",
				loading: false,
				log: false,
				disid: "",
				result: "",
				list: "",
				total: 0,

				time: "",
				time1: "",
				url: "",
				shangchuanshuju: "",
				shangchuanleibie: 0,
				shangchuanzhong: false,
				money:""
			}
		},
		created() {

			this.getlist();
			this.getmoney()
		},

		methods: {
			//复制功能
			copy: function(t) {
			  var that = this;
			  this.$copyText(t).then(res => {
			    that.$message.success("复制成功");
			  });
			},
			shunxu:function(){
				
			},
			//多条id
			duotiaoqueren:function(){
			  let list = this.duoxuanids.split(/\n/)
			  for(let i in list){
			    list[i] = list[i].trim()
			  }
			  this.all.ids = list.toString()
			  this.duoxuanlog = false
			},
			timechange:function(){
				if (this.time) {
					this.all.order_start = this.time[0]
					this.all.order_end = this.time[1]
				} else {
					this.all.order_start = ''
					this.all.order_end = ''
				}
			},
			tuikuan2:function(id){
				this.$prompt('确定拒绝退款吗', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消'
				}).then(({ value }) => {
					axios.post('/api/plan-market/great/refund/no',{id:id,reason:value})
						.then(response => {
							if(response.data.msg.code == 0){
								this.$message.success('已拒绝退款');
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
						})
				})
			    
			},
			tuikuan:function(id){
				this.$confirm('确定同意退款吗？', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					axios.post('/api/plan-market/great/refund/do',{id:id})
						.then(response => {
							if(response.data.msg.code == 0){
								this.$message.success('已同意退款');
								this.getlist()
							}else{
								this.$message.error(response.data.msg.info);
							}
						})
				})
			    
			},
			daochu:function(){
				
				axios.get('/api/plan-market/great/order/export')
					.then(response => {
						if (response.data.msg.code == 0) {
							window.location.href = response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
				
					})
			},
      daochu2:function(){
      	
      	axios.get('/api/plan-market/great/orders/export')
      		.then(response => {
      			if (response.data.msg.code == 0) {
      				window.location.href = response.data.data
      			} else {
      				that.$message.error(response.data.msg.info);
      			}
      	
      		})
      },
			go:function(url){
				this.$router.push(url)
			},
			shanchu1: function() {
				var that = this;
				axios.post('/api/tool/broadtable/delete')
					.then(response => {
						if (response.data.msg.code == 0) {
							this.$message.success("删除成功");
							this.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}

					})
			},
			shanchu2: function() {
				var that = this;
				axios.post('/api/tool/broadorders/delete')
					.then(response => {
						this.getlist()
					})
			},
			daoru1: function() {
				this.name3 = '导入值班数据'
				this.shangchuanleibie = 1
				this.log = true
			},
			daoru2: function() {
				this.name3 = '导入直播订单表'
				this.shangchuanleibie = 2
				this.log = true
			},
			changetime: function() {
				this.getlist()
			},
			xiazai1: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入发货模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghaodaorufahuo.xlsx');
				a.click();
			},
			xiazai2: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '靓号导入下架模板.xlsx');
				a.setAttribute('href', this.allurl + 'static/moban/lianghao2.xlsx');
				a.click();
			},
			xiazai3: function(name) {
				var that = this
				axios.get("/api/tool/broadorders/export?name=" + name + "&month=" + this.time)
					.then(function(response) {
						if (response.data.msg.code == 0) {
							window.location.href = window.location.origin + '/' + response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			exportData: function(data) {
				var that = this;
				var list = []
				//导入
				if (data.header[0] == "订单号") {
					for (let m in data.results) {
						let obj = {}
						if (data.results[m]['订单号']) {
							obj['id'] = (data.results[m]['订单号']).toString().trim()
						}
						if (data.results[m]['快递号']) {
							obj['tracking_number'] = data.results[m]['快递号'].toString().trim()
						}
						if (data.results[m]['快递公司']) {
							obj['tracking_company'] = data.results[m]['快递公司'].toString().trim()
						}
						if (data.results[m]['失败原因']) {
							obj['reason'] = data.results[m]['失败原因'].toString().trim()
						}
						

						
						list.push(obj)
					}

					axios.post("/api/plan-market/great/import/produced", {
							data: list
						})
						.then((response) => {
							if (response.data.msg.code == 0) {
								this.getlist()
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
				}


				// if (data.header[0] == "外部订单号") {
				// 	console.log(data)
				// 	for (var i = 0; i < data.results.length; i++) {
				// 		list.push(data.results[i]['外部订单号'])
				// 	}
				// 	this.shangchuanshuju = list
				// }

			},
			shangchuan: function() {
				var that = this
				if (this.shangchuanshuju == "") {
					this.$message.error('先上传数据');
					return false
				}
				this.shangchuanzhong = true

				if (this.shangchuanleibie == 1) {
					axios.post("/api/tool/broadtable/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				if (this.shangchuanleibie == 2) {
					axios.post("/api/tool/broadorders/import", {
							month: this.time1,
							data: this.shangchuanshuju
						})
						.then(function(response) {
							if (response.data.msg.code == 0) {
								if (response.data.data.errors != "") {
									var cuowu = ""
									for (var i in response.data.data.errors) {
										cuowu = cuowu + response.data.data.errors[i]
									}
									that.$message.error(cuowu);
								} else {
									that.$message.success("导入成功");
								}
								that.shangchuanzhong = false
								that.log = false
								that.getlist()
							} else {
								that.$message.error(response.data.msg.info);
								that.shangchuanzhong = false
							}
						})
				}
				this.getlist();

			},
			search:function(){
				this.all.page = 1
				this.getlist()
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.all.page = page
				this.getlist()
			},

			//获取
			getlist: function() {
				this.loading = true
				axios.get('/api/plan-market/great/shop/order', {
						params: this.all
					})
					.then(response => {
						this.total = response.data.data.total
						this.tableData = response.data.data.data
						this.loading = false
					})
			},
			getmoney: function() {
				axios.get('/api/plan-market/great/numbers/data')
					.then(response => {
						this.money = response.data.data
					})
			},
			

		}
	}
</script>
<style>
	.zhibo .el-button--primary {
		color: #FFF !important;
		background-color: #409EFF !important;
		border-color: #409EFF !important;
	}

	.zhibo .el-input__inner {
		line-height: 32px !important;
		height: 32px !important;
	}

	.zhibo .btnp {
		line-height: 32px !important;
		height: 32px !important;
		margin-bottom: 20px;
	}
</style>
<style lang="scss" scoped="scoped">
	.lianghaodingdan {
		margin: 0;
		padding: 0;
		background: #EFEFEF; font-family: "microsoft yahei";

		/deep/ .el-button--primary {
			background-color: #EEF7FF;
			color: #fff;
			border: 0;
			margin: 0 10px;
		}

		/deep/ .el-table__header th {
			background: #EAEAEA;
		}

		.flex {
			display: flex;
		}

		.center {
			width: 1366px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.right {
				flex-basis: 1166px;
				background: #FFF;
				
				.newthli{ flex: 1; text-align: center; padding: 20px; box-sizing: border-box; }
				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.add {
					padding: 20px 30px
				}

				.list {
					display: flex;
					text-align: center;
					color: #727272;
					line-height: 45px;
					margin: 0 20px;
					border: 1px #EAEAEA solid;
					margin-top: -1px;

					.th {
						flex: 1;
						background: #F9F9F9;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}

					.td {
						flex: 1;
						font-size: 14px;
						border-right: 1px #EAEAEA solid;
					}
				}

				.el-pagination {
					text-align: right;
					margin: 20px 0
				}
			}
		}

		.result {
			margin-top: 20px;
		}
	}
</style>
